﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Resource/Css/site.css" rel="stylesheet" />
    <script src="../Resource/Jquery/jquery-1.10.2.js"></script>
</head>
<body>
    <table class="tab" id="tab"></table>
    <table class="tab" id="tab2"></table>

    <table class="tab" id="tab3"></table>
    <table class="tab" id="tab4"></table>
</body>
</html>
<script>
    var json = {
        name: "a",
        age: 12,
        address: "北京",
        say: function () { alert(this.age); }
    };

    var classObj = function () {
        this.age = 13;
        this.name = "b";
        this.address = "北京",
        this.say = function () {
            alert(this.age);
        }
    }
    classObj.prototype.phone = "13900000";

    function extendObj(target, source) {
        for (var p in source) {
            if (source.hasOwnProperty(p)) {
                target[p] = source[p];
            }
        }
        return target;
    }

    var processJson = function (json) {
        this.json = json;

        this.keys = [];
        this.values = [];

        this.fields = [];
        this.fieldValues = [];

        this.fnKeys = [];
        this.fnCodes = [];

        /*
            支持类对象和json对象
            @source 扩展的数据来源
        */
        this.extend = function (source) {
            for (var p in source) {
                if (source.hasOwnProperty(p)) {
                    this.json[p] = source[p];
                }
            }
        }

        this.getKeys = function () {
            for (var i in this.json) {
                this.keys.push(i);
            }
        }

        this.getValues = function () {
            if (this.keys.length == 0) {
                this.getKeys();
            }
            for (var i = 0; i < this.keys.length; i++) {
                this.values.push(this.json[this.keys[i]]);

                if (typeof (this.json[this.keys[i]]) == "function") {
                    this.fnCodes.push(this.json[this.keys[i]]);
                }
            }
        }

        this.getFnVals = function () {
            if (this.keys.length == 0) {
                this.getValues();
            }
        }

        this.getFnKeys = function () {
            if (this.keys.length == 0) {
                this.getKeys();
            }
            if (this.fnCodes.length == 0) {
                this.getValues();
            }

            for (var i = 0; i < this.keys.length; i++) {
                var flag = false;
                for (var j = 0; j < this.fnCodes.length; j++) {
                    if (this.json[this.keys[i]] == this.fnCodes[j]) {
                        flag = true;
                    }
                }
                if (flag) {
                    this.fnKeys.push(this.keys[i]);
                }
            }
        }

        this.getFileds = function () {
            if (this.keys.length == 0) {
                this.getKeys();
            }
            if (this.fnCodes.length == 0) {
                this.getValues();
            }
            for (var i = 0; i < this.keys.length; i++) {
                var flag = true;
                for (var j = 0; j < this.fnCodes.length; j++) {
                    if (this.json[this.keys[i]] == this.fnCodes[j]) {
                        flag = false;
                    }
                }
                if (flag) {
                    this.fields.push(this.keys[i]);
                }
            }
        }

        this.getFiledValues = function () {
            for (var i = 0; i < this.fields.length; i++) {
                this.fieldValues.push(this.json[this.fields[i]]);
            }
        }

        this.init = function () {
            this.getFnVals();
            this.getFnKeys();
            this.getFileds();
            this.getFiledValues();
        }
    }

    var p = new processJson(json);
    p.init();

    function renderFileds() {
        var html = "<tr><td>名称</td><td>值</td></tr>";
        for (var i = 0; i < p.fields.length; i++) {
            html += "<tr>";
            html += "<td>" + p.fields[i] + "</td>";
            html += "<td>" + p.values[i] + "</td>";
            html += "</tr>";
        }
        $("#tab").append($(html));
    }

    function renderFunInfor() {
        var html = "<tr><td>名称</td><td>值</td></tr>";
        for (var i = 0; i < p.fnKeys.length; i++) {
            html += "<tr>";
            html += "<td>" + p.fnKeys[i] + "</td>";
            html += "<td>" + p.fnCodes[i] + "</td>";
            html += "</tr>";
        }
        $("#tab2").append($(html));
    }
    //renderFileds();
    //renderFunInfor();

    var p1 = new processJson(new classObj());
    p1.init();

    function renderClassFileds() {
        var html = "<tr><td>名称</td><td>值</td></tr>";
        for (var i = 0; i < p1.fields.length; i++) {
            html += "<tr>";
            html += "<td>" + p1.fields[i] + "</td>";
            html += "<td>" + p1.fieldValues[i] + "</td>";
            html += "</tr>";
        }
        $("#tab3").append($(html));
    }

    function renderClassFuns() {
        var html = "<tr><td>名称</td><td>值</td></tr>";
        for (var i = 0; i < p1.fnKeys.length; i++) {
            html += "<tr>";
            html += "<td>" + p1.fnKeys[i] + "</td>";
            html += "<td>" + p1.fnCodes[i] + "</td>";
            html += "</tr>";
        }
        $("#tab4").append($(html));
    }
    //renderClassFileds();
    //renderClassFuns();

    var obj = new classObj();

    var obj1 = {
        aaa: "1",
        bbb: "2",
        say1: function () {
            return this.aaa;
        }
    };
    //extendObj(obj, obj1);
    var p2 = new processJson(obj);
    p2.extend(obj1);
    p2.init();

    function renderClassFileds() {
        var html = "<tr><td>名称</td><td>值</td></tr>";
        for (var i = 0; i < p2.fields.length; i++) {
            html += "<tr>";
            html += "<td>" + p2.fields[i] + "</td>";
            html += "<td>" + p2.fieldValues[i] + "</td>";
            html += "</tr>";
        }
        $("#tab3").append($(html));
    }

    function renderClassFuns() {
        var html = "<tr><td>名称</td><td>值</td></tr>";
        for (var i = 0; i < p2.fnKeys.length; i++) {
            html += "<tr>";
            html += "<td>" + p2.fnKeys[i] + "</td>";
            html += "<td>" + p2.fnCodes[i] + "</td>";
            html += "</tr>";
        }
        $("#tab4").append($(html));
    }
    renderClassFileds();
    renderClassFuns();

</script>
